﻿<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8"/>
    <title>购物车</title>

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


    <!-- Header
        ================================================== -->
    <div th:replace="fragments/header :: header"></div>


    <!-- Titlebar
    ================================================== -->
    <section class="titlebar">
        <div class="container">
            <div class="sixteen columns">
                <h2>购物车</h2>

                <nav id="breadcrumbs">
                    <ul>
                        <li><a th:href="@{/index}">首页</a></li>
                        <li>购物车</li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>


    <div class="container cart">

        <!-- Cart Totals -->
        <div class="sixteen columns">
            <h3 class="headline">商品清单</h3><span class="line margin-bottom-35"></span>
            <div class="clearfix"></div>
        </div>

        <div class="sixteen columns">

            <!-- Cart -->
            <table class="cart-table responsive-table">

                <tr>
                    <th></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th></th>
                </tr>

                <!-- Item #1 -->
                <tr th:each="item,itemStat : ${cart_items}">
                    <td>
                        <div class="happy-clients-photo"><img src="images/dog_1.jpg" th:src="@{'/images/' + ${item.cart_item_image}}"
                                                              alt=""/></div>
                    </td>
                    <td class="cart-title"><a href="#" th:text="${item.cart_item_name}"></a></td>
                    <td th:text="'¥' + ${item.cart_item_price}">¥</td>
                    <td th:text="${item.cart_item_num}">
                        <!--<form action='#'>
                            <div class="qtyminus"></div>
                            <input type='text' name="quantity" th:value="${item.cart_item_num}" class="qty"/>
                            <div class="qtyplus"></div>
                        </form>-->
                    </td>
                    <td th:text="'¥' + ${item.cart_item_total_price}">¥</td>
                    <td><a th:href="@{/removeCartItem(item_id = ${item.cart_item_id})}" class="cart-remove"></a></td>
                </tr>

            </table>

            <div class="clearfix"></div>

        </div>

        <!-- Cart Totals -->
        <div class="eight columns cart-totals">
            <!--
                        <table class="cart-table margin-top-5">

                            <tr>
                                <th>总计：</th>
                                <td><strong>¥198.00</strong></td>
                            </tr>

                        </table>
            -->
                        <br></br>

                    </div>

                    <a th:href="@{/makeOrder}" class="continue button color">立即下单</a>

                </div>

                <div class="margin-top-50"></div>


                <!-- Footer
                    ================================================== -->
    <div th:replace="fragments/footer :: footer"></div>

</div>


<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>